<template>
  <span name="popup">
    <div class="font-family-wrap" v-show="fontFamilyVisible">
      <div class="font-family-titie-wrap">
        <div class="font-family-icon" @click="hide">
          <span class="icon-down2"></span>
        </div>
        <span class="font-family-title">选择字体</span>
      </div>
      <div class="font-family-list-wrap">
        <div
          class="font-family-list-item"
          :class="{'selected':isSelected(item)}"
          v-for="(item,index) in fontFamily"
          :key="index"
          @click="selectFamily(item)"
        >
          <div class="font-family-list-text">{{item.font}}</div>
          <div class="font-family-list-check" v-if="isSelected(item)">
            <span class="icon-check"></span>
          </div>
        </div>
      </div>
    </div>
  </span>
</template>

<script>
import { ebookMixin } from "./../../utils/mixin";
import { FONT_FAMILY } from "./../../utils/book";
export default {
  mixins: [ebookMixin],
  data() {
    return {
      fontFamily: FONT_FAMILY
    };
  },
  methods: {
    isSelected(item) {
      return this.defaultFontFamily === item.font;
    },
    //选择字体
    selectFamily(item) {
      this.setDefaultFontFamily(item.font);
      this.setFontFamilyVisible(false);
    },
    hide() {
      this.setFontFamilyVisible(false);
    }
  }
};
</script>

<style lang="scss" scoped>
@import "./../../assets/styles/global";
.font-family-wrap {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 300;
  width: 100%;
  box-shadow: 0 px2rem(-4) px2rem(6) rgba(0, 0, 0, 0.1);
  background-color: white;
  .font-family-titie-wrap {
    position: relative;
    padding: px2rem(15);
    box-sizing: border-box;
    font-size: px2rem(14);
    border-bottom: px2rem(1) solid #ccc;
    .font-family-icon {
      position: absolute;
      top: 0;
      height: 100%;
      text-align: left;
      @include center;
    }
    .font-family-title {
      text-align: center;
      display: block;
    }
  }
  .font-family-list-wrap {
    .font-family-list-item {
      font-size: px2rem(14);
      box-sizing: border-box;
      padding: px2rem(15);
      @include center;
      &.selected {
        color: #346cb9;
      }
      .font-family-list-text {
        flex: 1;
        text-align: left;
      }
      .font-family-list-check {
        flex: 1;
        text-align: right;
      }
    }
  }
}
</style>